<template>
  <!-- 实现页面的基本布局 -->
  <div class="departments">
    <el-card class="tree-card">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first" class="mypane">

          <!-- 用了一个行列布局 -->
          <treetools :data="headData" :is-root="true" @updatedata="getAllList" @opendialog="openAdd" />
          <hr>
          <!-- 放置一个属性，树形结构 -->
          <el-tree :data="list" default-expand-all>
            <!-- 说明el-tree里面的这个内容 就是插槽内容 => 填坑内容  => 有多少个节点循环多少次 -->
            <!-- slot-scope 是 tree组件传给每个节点的插槽的内容的数据 -->
            <!-- 顺序一定是 执行slot-scope的赋值 才去执行 props的传值 -->
            <treetools slot-scope="{data}" :data="data" @updatedata="getAllList" @opendialog="openAdd" />
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 弹出框 -->
    <adddept
      ref="adddept"
      :showdialog="showdialog"
      :currentitem="currentItem"
      :type="type"
      @closepanel="showdialog=false"
      @updatedata="getAllList"
    />
  </div>
</template>

<script>

import { companyDepartmentApi } from '@/api/departments'
export default {
  components: {
    treetools: () => import('./components/tree-tools.vue'),
    adddept: () => import('./components/add-dept.vue')
  },
  data() {
    return {
      activeName: 'first',
      headData: {},
      list: [],
      showdialog: false,
      currentItem: '',
      type: ''
    }
  },
  created() {
    // 打开页面
    // 得到组织架构数据
    this.getAllList()
  },
  methods: {
    openAdd(item) {
      // item:当前点击添加子部门按钮对应的数据源
      this.showdialog = true
      // 保存item到当前页面上，将来传给add-dept
      this.currentItem = item.data
      this.type = item.process
      // 在这里进行判断：type是否为view，如果是就直接将item.data也就是currentItem赋值给子组件中的form
      if (item.process === 'view') {
        this.$refs.adddept.form = { ...this.currentItem }
      }
    },
    // 得到所有组织架构中的数据
    async getAllList() {
      const res = await companyDepartmentApi()
      // 将第一条数据取出，放到headData中
      this.headData = {
        ...res.depts[0],
        manager: '负责人'
      }
      this.list = this.trunData(res.depts, '')
      console.log('-----', this.list)
    },
    // 转换数据源为树状结构的方法
    trunData(arr, pid) {
      var res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          var children = this.trunData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          res.push(item)
        }
      })
      return res
    },
    cancel(val) {
      this.showdialog = val
    }
  }
}

</script>

<style lang="scss" scoped>
.departments{
  padding: 20px;
  .tree-card{
padding: 30px 140px;
font-size: 14px;
  .mypane{
    padding: 40px 120px;
  }
}
}
</style>
